<template>
	<view class="container">
		<!-- Header with title and icons -->
		<navVue></navVue>
		<!-- Main banner -->
		<swiper class="banner" :indicator-dots="true" autoplay="true" :interval="5000" duration="500" circular="true" @change="onSwiperChange">
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<image :src="item.imageUrl" mode="aspectFill" />
			</swiper-item>
		</swiper>
		<!-- 热门推荐 -->
		<view class="section">
			<text class="section-title">热门推荐</text>
			<scroll-view class="scroll-view" scroll-x="true" @scroll="onScroll">
				<view class="scroll-content">
					<view class="scroll-item" v-for="(item, index) in hotRecommends" :key="index" @tap="navigateToDetail(item.id)">
						<image :src="item.image" @error="handleImageError(item)" mode="aspectFill"></image>
						<text class="item-title-hot">{{item.title}}</text>
						<text class="item-price">¥ {{item.price}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 精品推荐 -->
		<view class="section">
			<text class="section-title">精品推荐</text>
			<view class="grid">
				<view class="grid-item" v-for="(item, index) in featuredRecommends" :key="index" @tap="navigateToDetail(item.id)">
					<image :src="item.image" @error="handleImageError(item.id)" mode="aspectFill"></image>
					<text class="item-title-boutique">{{item.title}}</text>
					<text class="item-price">¥ {{item.price}}<text style="font-size: 18rpx; margin-left: 5rpx;">元/人</text></text>
				</view>
			</view>
		</view>
		<tabBarVue :current="current"></tabBarVue>
	</view>
</template>

<script>
	import { mapState,mapActions } from 'vuex';
	import navVue from '../../../components/nav/nav.vue';
	import tabBarVue from '../../../components/tabbar/tabbar.vue';
	import {http} from '../../../utils/http.js';
	export default {
		data() {
		    return {
			  current:0,
		      topImageSrc: 'https://example.com/top-image.jpg',
		      fallbackImage: '/static/fallback-image.png',
		      bannerList: [],
		      hotRecommends: [],
		      featuredRecommends: []
		    };
		  },
		  computed: {
		    ...mapState(['id', 'state2']),
		  },
		  components: {
		    navVue,
		    tabBarVue
		  },
		onShow(){
			  uni.hideTabBar({
				animation: false
			  })
			  this.current = 0   // 公告页面和我的页面根据需要传入对应的索引号
		},
		  methods: {
		    ...mapActions(['fetchData']),
		    handleImageError(item) {
		      if (item) {
		        item.image = this.fallbackImage;
		      } else {
		        this.topImageSrc = this.fallbackImage;
		      }
		    },
		    onScroll(e) {
		      // 可以在这里添加滚动事件的处理逻辑
		      console.log('scrolling', e);
		    },
		    onSwiperChange(e) {
		      // console.log('Current swiper index:', e.detail.current);
		    },
		    navigateToDetail(id) {
		      uni.navigateTo({
		        url: '/common/pages/details/details?id='+id // 修改为详情页
		      });
		    },
		    async fetchBannerList() {
		      try {
		        const { data } = await http({
		          url: '/api/common/banner',
		          method: 'get',
		        });
		        this.bannerList = data;
		      } catch (error) {
		        console.error('Error fetching banner list:', error);
		      }
		    },
		    async fetchRecommendations() {
		      try {
		        const { data } = await http({
		          url: '/api/common/listAll',
		          method: 'get',
		        });
		        this.hotRecommends = [];
		        this.featuredRecommends = [];
		        data.forEach((item) => {
		          const recommendItem = {
		            image: item.imgUrl,
		            title: item.spotName,
		            price: item.showPrice,
					id:item.id
		          };
		          if (item.state === 1) {
		            this.hotRecommends.push(recommendItem);
		          } else if (item.state === 0) {
		            this.featuredRecommends.push(recommendItem);
		          }
		        });
		      } catch (error) {
		        if (error.statusCode === 404) {
		          console.error('Error: Resource not found (404)', error);
		        } else {
		          console.error('Error fetching data:', error);
		        }
		      }
		    }
		  },
		  async mounted() {
		    await this.fetchBannerList();
		    await this.fetchRecommendations();
		  }
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		background-color: #f8f8f8;
		/* min-height: 100vh; */
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
	}

	.logo {
		width: 80rpx;
		height: 80rpx;
	}

	.title {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
	}

	.icons .icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
	}

	.banner {
		margin-top: 40rpx;
		padding: 0%;
		height: 400rpx;
	}

	.banner image {
		width: 100%;
		height: 400rpx;
		padding: 0%;
	}

	.top-image {
		width: 100%;
		height: 400rpx;
		border-radius: 20rpx;
	}

	.section {
		margin-top: 20rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		padding-left: 20rpx;
		color: #333;
	}

	.scroll-view {
		width: 100%;
		white-space: nowrap;
		padding-left: 20rpx;
		padding-top: 20rpx;
	}

	.scroll-content {
		display: inline-block;
	}

	.scroll-item {
		display: inline-block;
		width: 300rpx;
		height: 300rpx;
		margin-right: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.scroll-item image {
		width: 100%;
		height: 200rpx;
	}

	.grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx;
		margin-bottom: 100px;
	}

	.grid-item {
		width: 48%;
		height: 340rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.grid-item image {
		width: 100%;
		height: 200rpx;
	}

	.item-title-hot {
		font-size: 30rpx;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
		margin: 10rpx 10rpx 0 10rpx;
	}


	.item-title-boutique {
		font-size: 30rpx;
		color: #333;
		white-space: normal;
		/* overflow: hidden; */
		text-overflow: clip;
		display: block;
		margin: 10rpx 10rpx 0 10rpx;
	}

	.item-price {
		color: #ff4d4f;
		font-size: 28rpx;
		margin: 10rpx 10rpx 10rpx 10rpx;
	}
</style>